import React from "react";
import {
    BarChart,
    Bar,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    ResponsiveContainer,
} from "recharts";

import { IDisplayBarChartProps } from "../../interfaces";

export const formatDate = new Intl.DateTimeFormat("en-US", {
    month: "short",
    year: "numeric",
    day: "numeric",
});

export const DisplayBarChart: React.FC<IDisplayBarChartProps> = ({
    data,
    fill,
}) => {
    const transformedData = data.map(({ date, value }) => ({
        date: formatDate.format(new Date(date)),
        value,
    }));

    return (
        <ResponsiveContainer aspect={3.5}>
            <BarChart data={transformedData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis dataKey="value" />
                <Tooltip />
                <Bar dataKey="value" fill={fill} />
            </BarChart>
        </ResponsiveContainer>
    );
};
